<template>
  <!-- 直接内嵌SVG，避免外部引用问题 -->
  <svg :style="style"
       aria-labelledby="favouriteIconTitle"
       fill="none"
       height="14px" role="img"
       stroke="#888"
       stroke-linecap="square"
       stroke-linejoin="miter"
       stroke-width="2"
       viewBox="0 0 24 24"
       width="14px"
       xmlns="http://www.w3.org/2000/svg">
    <path
        d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"/>
  </svg>
</template>

<script setup>
import {computed} from 'vue';

// 接收外部传入的样式属性，保持与Element Plus图标一致的用法
const props = defineProps({
  size: {
    type: [Number, String],
    default: '14px'
  },
  color: {
    type: String,
    default: '#000'
  }
});

// 计算最终样式
const style = computed(() => ({
  width: typeof props.size === 'number' ? `${props.size}px` : props.size,
  height: typeof props.size === 'number' ? `${props.size}px` : props.size,
  color: props.color
}));
</script>

<style scoped>
</style>
